<template>
	<div class="shoppingList">
		<navAndBanner></navAndBanner>
		<div class="img1">

		</div>
		<div style="height:1px;border-top:3px solid #7ecef4;width:76.4%;margin:0 auto;"></div>
		<div style="margin-top: 30px;margin-left: 15.3vw">
			<div id="tips">
				<span @click = "searchType = 'CJKH';isTrue1 = true;isTrue2 = false;isTrue3 = false" :class="{black:isTrue1}">酒卡号</span><span @click = "searchType = 'KHDH';isTrue2 = true;isTrue1=false;isTrue3 = false" :class="{black:isTrue2}">手机号码</span><span  @click = "searchType = 'KHBM';isTrue3 = true;isTrue1 = false;isTrue2 = false" :class="{black:isTrue3}">会员号</span>
				<div style="position: relative;">
					<input type="" name="" class="search" @keyup.13="search(searchType)" v-model="ss"><img src="../../assets/img/搜索.png" style="left: 29vw;position: absolute;top: 10px" >
					<button class="btn" @click="sendSms">发送短信</button>
				</div>
			</div>
		</div>
		<div class="table">
			<Table border :columns="columns4" :data="smsList" @on-select="getinfo"></Table>
		</div>
		<div class="footer">
			<p>kqmts   &copy 2015-2017 All Rights Reserved</p>
			<p>川ICP备16020686号</p>
		</div>
	</div>
</template>
<script>
	import navAndBanner from '../navAndBanner.vue'
	export default {
		components:{
			navAndBanner
		},
		data(){
			return{
				columns4: [
				{
					type: 'selection',
					width: 60,
					align: 'center'
				},
				{
					title: '序列',
					key: 'XH'
				},
				
				{
					title: '客人姓名',
					key: 'KHMC'
				},
				{
					title: '联系方式',
					key: 'KHDH'
				},
				
				{
					title: '短信提醒状态',
					key: 'STATE'
				}
				],
				smsList:[],
				searchType:"CJKH",
				isTrue:false,
				isTrue1:true,
				isTrue2:false,
				isTrue3:false,
				ss:"",
				info:[]
			}
		},
		mounted(){
				//拉去浏览器userinfo
				this.userinfo = JSON.parse(sessionStorage.userinfo).data;
				var _this = this
				this.$http.post(`${this.URL}/api/ws/sms_list`,{
					timestamp:new Date().getTime(),
					token:_this.userinfo.token,
					userid:_this.userinfo.YHBM
				})
				.then(function  (res) {
					// body... 
					console.log(res)
					if (res.data.error_code ==0) {
						
						_this.smsList = res.data.data
					}
				})
			},
			methods:{
				getinfo:function(info){
					this.info = info;
					console.log(info)
				},
				sendSms:function(){
					for (var i = this.info.length - 1; i >= 0; i--) {
						var _this = this
						this.$http.post(`${this.URL}/api/ws/sms_send`,{
							timestamp:new Date().getTime(),
							token:_this.userinfo.token,
							userid:_this.userinfo.YHBM,
							DH:_this.info[i].DH
						})
						.then(function(res){
							console.log(res)
							if (res.data.error_code ==0) {

							}
						})
					}
				},
				search:function(key){
					
					
					if (true) {
						for (var i = this.smsList.length - 1; i >= 0; i--) {
							console.log(this.smsList[i].CJKH)
							console.log(this.ss)						
							if (this.smsList[i].CJKH.indexOf(this.ss)!= -1) {
								
								var a = []
								a.push(this.smsList[i])
								this.smsList = a
							}
						}
					}
					if (key == "KHDH") {
						for (var i = this.smsList.length - 1; i >= 0; i--) {						
							if (this.smsList[i].KHDH.indexOf(this.ss)!= -1) {
								var a = []
								a.push(this.smsList[i])
								this.smsList = a
							}
						}
					}
					if (key == "KHBM") {
						for (var i = this.smsList.length - 1; i >= 0; i--) {						
							if (this.smsList[i].KHBM.indexOf(this.ss)!= -1) {
								var a = []
								a.push(this.smsList[i])
								this.smsList = a
							}
						}
					}
					console.log('sea',this.smsList[0].CJKH)	
					
				}
			}
		}
	</script>
	<style scoped>
		.black{
			background:black !important;
		}
		.table{
			width: 69.3vw;
			margin: 0 auto;
			margin-top: 45px;
			margin-bottom: 125px
		}
		.btn{
			width: 7.81vw;
			height: 48px;
			outline: none;border:none;
			background: #ffcc00;
			color: white;
			font-size: 1vw;
			margin-left: 29.27vw
		}
		.search{
			border:3px solid #7ecef4;
			width: 31.25vw;
			height: 48px;
			position: relative;
		}
		#tips span{
			display: inline-block;
			width: 5.2vw;
			height: 40px;
			text-align: center;
			line-height: 40px;
			color: #5cb7e2;
			background: #bee6f9;
			font-size: 0.93vw
		}
		.clickspan{
			background: #7ecef4;
			color: white
		}
		.img1{
			background: url(../../assets/img/Title3.png) no-repeat;
			width: 536px;
			height: 87px;
			margin:0 auto;
			margin-top: 90px;margin-bottom: 80px;
		}
		.navAndBanner{
			background:linear-gradient(30deg,#b490ca,#5ebbe7);
			width: 100%;
			height: 120px;
			vertical-align: middle;
			padding-top: 40px

		}
		a{
			text-decoration: none;
		}
		nav ul li{
			display: inline-block;
			vertical-align: middle;
			margin-right: 5%
		}
		nav ul li a{
			font-size: 24px;
			color: #999999;
		}
		nav ul li:first-child{
			margin-left: 13%;
			margin-right: 15%;
		}
		nav ul li:last-child{
			margin-top: 12px;
			float: right

		}
		body{background-color: #1E1E1E}
		*{padding:0;margin: 0;list-style:none;font-family: "微软雅黑"}
		.footer{
			height: 125px;
			width: 100%;
			background:linear-gradient(30deg,#b490ca,#5ebbe7);
			text-align: center;
			vertical-align: middle;
			color: white;
			padding-top: 50px
		}
	</style>